// backstate/Index.vue
<template>
    <el-container class="index-con">      
       <el-header  class="index-header">
          <navcon class="header-fixed"></navcon>
        </el-header>
      <el-container style="margin-left:5px;">   
        <el-aside  :class="showclass">
        <leftNav></leftNav>
      </el-aside>
        <el-main style="background-color:#FAFBFC;" class="index-main">         
           <router-view></router-view> 
        </el-main>
      </el-container>
    </el-container>
  
</template>
<script>
import leftNav from '@/components/backstage/leftNav.vue'
import Navcon from '@/components/backstage/navcon.vue'

export default {
  data() {
    return {
      showclass:'asideshow'
    }
  },
  // 注册组件
  components:{leftNav,Navcon},
  created(){
    // 监听
    this.bus.$on('switch',value=>{
      if (value) {
        this.showclass='asideshow'
      } else {
        setTimeout(()=>{
          this.showclass='aside'
        },300)
      }
    })
  },
  // beforeRouteEnter (to, from, next) {
  //   // ... 
  //   console.log('路由离开index...');
  //   next()
  // },
  // beforeRouteEnter (to, from, next) {
  //   console.log('路由进入index...');
  //   next()
  // }
}
</script>
<style scoped>

/* // 引入icon */
/* @import './assets/icon/iconfont.css'; */
.index-con {
  width: 100%;
  height: 680px;
  box-sizing: border-box;
}
.aside {
  width: 64px!important;
  height: 100%;
  background-color: #ffffffef;
  margin-top: 5px;
  margin-left: -5px;
 /* padding: 0; */
}
.asideshow {
  width: 240px!important;
  height: 100%;
  /* background-color: #fff; */
   background-color: #ffffffef;
  margin-top: 5px;
   margin-left: -5px;
  /* padding: 0; */
}
/* .header-fixed {
 position: fixed !important;;
 top: 0;
 left: 0;
} */
.index-header,.index-main {
  padding: 0;
  /* position: fixed;
  top: 0;
  left: 0; */
 
  /* border-left: 2px solid #333; */
}
.index-main {
 /* padding-top: 10px;
 padding-left:10; */
 padding: 10px;
 margin-top: 10px;
 background-color: #ffffffc7;
}

 
 
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  /* 边框 */
  .boxShadow {
 box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }
  /* 布局样式设置 */
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  
 
</style>